<template>
	<view class="flex-col page">
		<view class="flex-col flex-auto group space-y-20">
			<view class="flex-col section_3 space-y-43">
				<view class="flex-col space-y-41">
					<text class="self-start font_2 text_4">举报类型</text>
					<view class="flex-row justify-between list">
						<view class="flex-row item" v-for="(item,index) in data.list" :key="index" @click="data.text=item">
							<image class="shrink-0 image_6" src="/static/click_ac.png" mode="" v-if="data.text==item"></image>
							<image class="shrink-0 image_6" src="/static/click.png" mode="" v-else></image>
							<text class="font_3">{{item}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="flex-col section_5">
				<textarea cols="30" rows="10"  class="self-start font_3 text_5" placeholder="请输入您的举报内容..." v-model="data.report_content"></textarea>
				<view class="flex-col justify-start items-center button" @click="toReport"><text class="font_2 text_6">提交</text></view>
			</view>
		</view>
	</view>
</template>


<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		ref,
		reactive,
		nextTick,
		watch,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	onLoad((option) => {
		console.log(option);
		data.value.shop_id = option.shop_id
		// getDate()
	})
	let data = ref({
		shop_id: '',
		text: '色情低俗',
		report_content:'',
		content: {},
		list:['色情低俗','广告骚扰','其他'],
	})
	
	const getDate = () => {
		proxy.$req.requestPOST(proxy.$api.SystemInfo.getReportType).then(res => {
			data.value.list = res.data.list
			data.value.text = res.data.list[0]
			if(res.flag=="success"){
				
			}
		})
	}
	const toReport=()=>{
		proxy.$req.requestPOST(proxy.$api.ShopInfo.report, {
			member_id:uni.getStorageSync('member_id'),
			shop_id: data.value.shop_id,
			report_reason:data.value.text,
			report_detail:data.value.report_content
		}).then(res => {
			uni.showToast({
				title:res.message,
				icon:"none"
			})
			if(res.flag=="success"){
				setTimeout(()=>{
					uni.navigateBack()
				},1000)
			}
		})
	}
	const toOrder = () => {
		uni.navigateTo({
			url: '/pages/order/order?shop_id='+data.shop_id
		})
	}
</script>

<style scoped lang="scss">
	.page {
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group {
			overflow-y: auto;

			.section_3 {
				padding: 42rpx 30rpx 45rpx;
				background-color: #ffffff;

				.space-y-41 {

					&>view:not(:first-child),
					&>text:not(:first-child),
					&>image:not(:first-child) {
						// margin-top: 41rpx;
					}

					.text_4 {
						margin-left: 4rpx;
						color: #333333;
						line-height: 30rpx;
					}
					.list{
						flex-wrap: wrap;
						.item{
							width: 50%;
							margin-top: 46rpx;
							// margin: 23rpx 0;
						}
					}	
					.image_6 {
						border-radius: 16rpx;
						width: 32rpx;
						height: 32rpx;
						margin-right: 23rpx;
					}
					.group_2 {
						margin-right: 148rpx;
					}

					.space-x-24 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-left: 24rpx;
						}
					}

					.section_4 {
						border-radius: 16rpx;
						width: 32rpx;
						height: 32rpx;
						border: solid 2rpx #dddddd;
					}

					.group_3 {
						margin-right: 147rpx;
					}

					.group_4 {
						margin-right: 146rpx;
					}

					.space-x-25 {

						&>view:not(:first-child),
						&>text:not(:first-child),
						&>image:not(:first-child) {
							margin-left: 25rpx;
						}
					}
				}
			}

			.space-y-43 {

				&>view:not(:first-child),
				&>text:not(:first-child),
				&>image:not(:first-child) {
					margin-top: 43rpx;
				}
			}

			.section_5 {
				padding: 32rpx 30rpx 56rpx;
				background-color: #ffffff;

				.text_5 {
					color: #111;
					line-height: 26rpx;
					width: 100%;
				}

				.button {
					// margin: 798rpx 30rpx 0;
					position: fixed;
					bottom: 40rpx;
					width: 90%;
					padding: 36rpx 0;
					background-color: #54BC6E;
					border-radius: 24rpx;

					.text_6 {
						color: #ffffff;
						line-height: 31rpx;
					}
				}
			}

			.font_3 {
				font-size: 28rpx;
				font-family: PingFang SC;
				line-height: 28rpx;
				color: #333333;
			}

			.font_2 {
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}
		}

		.space-y-20 {

			&>view:not(:first-child),
			&>text:not(:first-child),
			&>image:not(:first-child) {
				margin-top: 20rpx;
			}
		}
	}
</style>